<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单显示测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .test-content {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }
        
        .test-button {
            background: #4285f4;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        
        .test-button:hover {
            background: #3367d6;
        }
        
        .instructions {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #4285f4;
        }
    </style>
</head>
<body>
    <div class="test-content">
        <h1>Prompt Manager 菜单显示测试</h1>
        
        <div class="instructions">
            <h3>测试说明：</h3>
            <ol>
                <li>确保Chrome插件已安装并启用</li>
                <li>点击浏览器工具栏中的插件图标</li>
                <li>菜单应该出现在浏览器内部的右上角</li>
                <li>测试缩小/展开功能</li>
                <li>测试各个按钮的功能</li>
            </ol>
        </div>
        
        <h3>测试功能：</h3>
        <button class="test-button" onclick="testMenu()">显示菜单</button>
        <button class="test-button" onclick="testScrape()">测试爬取</button>
        <button class="test-button" onclick="testExport()">测试导出</button>
        
        <div class="instructions">
            <h3>预期效果：</h3>
            <ul>
                <li>菜单应该完整显示在右上角</li>
                <li>菜单不应该被页面内容遮挡</li>
                <li>菜单应该有渐变背景和圆角</li>
                <li>按钮应该有悬停效果</li>
                <li>缩小功能应该正常工作</li>
            </ul>
        </div>
        
        <div style="margin-top: 40px; padding: 20px; background: #e3f2fd; border-radius: 8px;">
            <h4>页面内容区域</h4>
            <p>这里是一些页面内容，用来测试菜单是否会被页面内容影响。</p>
            <p>菜单应该始终显示在右上角，不受页面滚动影响。</p>
        </div>
    </div>
    
    <script>
        function testMenu() {
            if (typeof chrome !== 'undefined' && chrome.runtime) {
                chrome.runtime.sendMessage({action: 'showMenu'});
            } else {
                alert('请在Chrome浏览器中打开此页面，并确保插件已安装');
            }
        }
        
        function testScrape() {
            alert('爬取功能测试');
        }
        
        function testExport() {
            alert('导出功能测试');
        }
    </script>
</body>
</html>
